<!--
@Description:筛选内容
@Author:zqy
@Date:2022-10-26 11:18:34
@Last Modified by:zqy
@Last Modified time:2022-10-26 11:18:34
-->
<script>
export default {
  name: 'FilterCard',
  props: {
    showBtn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    }
  },
  methods: {
    resetHandle() {
      this.$emit('reset')
    },
    confirmHandle() {
      this.$emit('confirm')
    }
  },
  render(h) {
    if (!this.$scopedSlots.default) return
    const children = this.$scopedSlots.default()
    const vnodes = []
    for (const c of children) {
      vnodes.push(c)
    }
    return h('div', { class: 'filter-card' }, [
      h('div', { class: 'card-content' }, vnodes),
      h('div', { class: ['btn-container', { 'hidden': !this.showBtn }] }, [
        h('van-button', { class: 'cus-default', props: { round: false }, on: { click: this.resetHandle }}, '重置'),
        h('van-button', { class: 'cus-primary', props: { round: false, type: 'primary' }, on: { click: this.confirmHandle }}, '确定')
      ])
    ])
  }
}
</script>
<style lang="less" scoped>
.filter-card{
  .card-content{
    padding: 0px 6px;
    min-height: calc(100vh - 46px - 88px);
  }
  .btn-container{
    display: flex;
    justify-content: space-between;
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
    width: 100vw;
    left: 0;
    bottom: 0;
    padding: 20px 0;
    box-sizing: border-box;
    background-color: #fff;
    &.hidden{
      display: none;
    }
    /deep/ .van-button{
      border: 0;
      height: 48px;
      font-size: 16px;
      font-weight: 600;
      box-sizing: border-box;
      &.cus-default{
        width: 115px;
        background: #FFFFFF;
        color: #333333;
      }
      &.cus-primary{
      flex: 1;
      background: #16BC83;
      color: #fff;
      }
    }
  }
}
</style>
